<template>
  <div class="category-container">
    <search-header class="search-header">
      <template v-slot:mid>
        <div class="search">
          <div class="search-box">
            <span class="icon fa fa-search"></span>
            <input
              type="text"
              placeholder="请输入菜名或者食材搜索"
              class="search-inp"
              @click="toSearch"
            />
          </div>
        </div>
      </template>
    </search-header>
    <div class="content">
      <van-loading
        size="50px"
        text-size="20px"
        class="loading"
        color="chocolate"
        >加载中...</van-loading
      >

      <van-tabs v-model="index" scrollspy sticky :offset-top="40" v-if="isShow">
        <van-tab
          v-for="item in res"
          :title="item.name"
          :key="item.id"
          class="nav-fixed"
        >
          <comp-category-item class="item">
            <div class="detail">
              <h5>{{ item.name }}:</h5>
              <div class="detail-content">
                <a
                  v-for="e in item.list"
                  :key="e.classid"
                  @click="showList(e.classid, e.name)"
                  >{{ e.name }}</a
                >
              </div>
            </div>
          </comp-category-item>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import searchHeader from "@/components/search-header.vue";
import CompCategoryItem from "@/components/comp-categoryItem.vue";
export default {
  name: "Category",
  components: {
    CompCategoryItem,
    searchHeader,
  },
  data() {
    return {
      index: "",
      res: [],
      isLoaded: false,
      isShow: false,
    };
  },
  methods: {
    toSearch() {
      this.$router.push({ path: "/search" });
    },
    showList(id, name) {
      axios
        .get(
          `/byclass?classid=${id}&start=0&num=10&appkey=d9c770661cb89052d8785cadce76e57a`
        )
        .then((response) => {
          let data = response.data;
          if (data.code == 10000) {
            let res = data.result.result.list;
            this.$router.push({
              path: "/categorylist",
              query: { cid: id, name: name },
            });
            localStorage.setItem("list", JSON.stringify(res));
            if (data.result.status == 205) {
              console.log("没有数据");
            }
          }
        });
    },
  },
  created() {
    this.isLoaded = true;

    let pro = axios.get(
      "/recipe_class?appkey=d9c770661cb89052d8785cadce76e57a"
    );
    pro.then((response) => {
      if (response.data.code == 10000) {
        setTimeout(() => {
          this.res = response.data.result.result;
          this.isLoaded = false;
          this.isShow = true;
        }, 300);
      }
    });
  },
  watch: {},
};
</script>

<style lang="less" scoped>
@searchfC: #666;
@bgColor: #e6e6e6;
@borderColor: chocolate;
.category-container {
  .search-body {
    width: 100%;
    height: 40px;
  }
}
.search-header {
  // padding-top: 40px;
  background-color: #fff;
}
.search {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: @searchfC;
  .search-box {
    width: 100%;
    position: relative;
    .search-inp {
      width: 100%;
      height: 30px;
      font-size: 12px;
      padding-left: 80px;
      box-sizing: border-box;
      border-radius: 5px;
      background-color: @bgColor;
    }
  }
}
.content {
  width: 100%;
  height: 100%;
  padding-top: 30px;
  padding-bottom: 30px;
  .loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .detail {
    width: 100%;
    height: 100%;
    font-size: 14px;
    margin-bottom: 20px;
    padding-top: 10px;
    background-color: #fff;
    h5 {
      font-size: 18px;
      color: chocolate;
      margin-bottom: 10px;
    }
    .detail-content {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      a {
        display: inline-block;
        width: 25%;
        padding: 0px 0px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        margin-right: 10px;
        margin-bottom: 10px;
        // background-color: @bgColor;
        border-radius: 4px;
        border: 1px solid @borderColor;
      }
    }
  }
}
</style>